<template>
    <div class="undefinedbootstrap_full_number">
      <span class="dataTotal">
        共 <span class="numData">{{pageNum}}</span> 页 　  
      </span>
      <ul class="pagination" style="visibility: visible;">
        <li class="prev disabled" @click="firstFlag && firstPage()">
          <a title="第一">首页</i></a>
        </li>
        <li class="prev disabled" @click="prevFlag && prevPage($event)">
          <a title="上一页"><i class="fa fa-angle-left"></i></a>
        </li>
        <li v-for="(item,index) in page" :class="{active:index==(page_num-1),block:((min<=index)&&(index<max))}" class="pageLi" @click="nowFlag && nowPage(index)">
            <a>{{index+1}}</a>
        </li>
        <li class="next" :class="{disabled:pageNum<=1}" @click="nextFlag && nextPage($event)">
          <a title="下一个"><i class="fa fa-angle-right"></i></a>
        </li>
        <li class="next" :class="{disabled:pageNum<=1}" @click="lastFlag && lastPage()">
          <a title="持续">尾页</a>
        </li>
          
      </ul>
      <span class="dataTotal">
        每页显示 <span class="numData">{{page_size}}</span> 条数据 　  
      </span>
      <span class="dataTotal">
        跳转至 <input type="text" value="page_num" style="border:1px solid #dbdbdb;font-size: 14px;color:#333;width: 50px;padding: 5px 10px;text-align: center;" v-model="page_num"> 页 　  
      </span>
      <button class="btn green" @click="toPage()" style="position: relative;top: -22px;padding: 5px 14px;">跳转
      </button>
    </div>
</template>
<style scoped>
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .pagination li.pageLi{display: none;}
    .pagination li.pageLi.block{display: inline;}
</style>
<script>
    import optVue from '../config/optVue.js';
    export default {      
        data: function () {
            return {
                dataObj:{}, // json对象
                number:0,
                min:Number,
                firstFlag:false,
                prevFlag:false,
                nowFlag:true,
                nextFlag:true,
                lastFlag:true,
                max:5,
                maxNum:5
            }
        },
        props: {
            page:{
                type : Array
            },
            pageNum:{
                type : Number
            },
            page_size:{
                type : Number
            },
            page_num:{
               type : Number     
            },
            total:{
               type : Number     
            } 
              
        },
        mounted(){
            this.showPageindex(0,this.maxNum,0)
        },
        methods: {
          showPageindex : function(min, max, index) {   
            if (index <= Math.ceil(max / 2)) {

                var min = 0;
                var max = max;

            }
           else if (this.pageNum - index < Math.ceil(max / 2)) {
              var min = this.pageNum - max;
              var max = this.pageNum ;

            } 
            else{
              var min = Math.ceil(index - max / 2)-1;
              var max = index + Math.ceil(max / 2)-1;
            }
            this.min = min;
            this.max = max;
          },
          nowPage:function(index){

            if(this.pageNum<=1){
              return;
            }
            console.log(this.page_num)
            this.number = index;
            if(this.number == 0){
              $(".prev").addClass("disabled");
              $(".next").removeClass("disabled");
              this.firstFlag = false;
              this.prevFlag = false;
              this.lastFlag = true;
              this.nextFlag = true;
            }
            else if(this.pageNum-1 == this.number){
              $(".next").addClass("disabled");
              $(".prev").removeClass("disabled");
              this.firstFlag = true;
              this.prevFlag = true;
              this.lastFlag = false;
              this.nextFlag = false;
            }
            else{
              this.firstFlag = true;
              this.prevFlag = true;
              this.lastFlag = true;
              this.nextFlag = true;
              $(".next").removeClass("disabled");
              $(".prev").removeClass("disabled");
            }
            $(".table-checkbox").closest("table").find(".checkboxes").prop({checked:false})
            

            this.showPageindex(0,this.maxNum,this.number+1);
            var pageArr = {
              page_num : this.number+1
            }
            optVue.xqglNowPag(this,pageArr);
            
          },
          nextPage:function(el){
            if(this.pageNum<=1){
              return;
            }
           

            $(".prev").removeClass("disabled");
            if(this.pageNum == this.number+2){

              $(".next").addClass("disabled");
             

            }
            if(this.pageNum == this.number+1){
              this.firstFlag = true;
              this.prevFlag = true;
              this.lastFlag = false;
              this.nextFlag = false;
              return false;
            }
            this.firstFlag = true;
            this.prevFlag = true;
            this.lastFlag = true;
            this.nextFlag = true;
            this.number++;
            this.showPageindex(0,this.maxNum,this.number+1);
            var pageArr = {
              page_num : this.number+1
            }
            optVue.xqglNowPag(this,pageArr);
          },
          prevPage:function(el){
            if(this.pageNum<=1){
              return;
            }
            $(".next").removeClass("disabled");
            if(this.number == 1){
              $(".prev").addClass("disabled");
              
            }
            if(this.number == 0){
              this.firstFlag = false;
              this.prevFlag = false;
              this.lastFlag = true;
              this.nextFlag = true;
              return false;
            }
            this.firstFlag = true;
            this.prevFlag = true;
            this.lastFlag = true;
            this.nextFlag = true;
            this.number--;
            this.showPageindex(0,this.maxNum,this.number+1);
            //var pageArr = 
            var pageArr = {
              page_num : this.number+1
            }
            optVue.xqglNowPag(this,pageArr);
          },
          lastPage:function(){
            if(this.pageNum<=1){
              return;
            }
            $(".next").addClass("disabled");
            $(".prev").removeClass("disabled");
            this.number = this.pageNum-1;
            this.showPageindex(0,this.maxNum,this.number)
            var pageArr = {
              page_num : this.pageNum
            }
            optVue.xqglNowPag(this,pageArr);
            this.firstFlag = true;
            this.prevFlag = true;
            this.lastFlag = false;
            this.nextFlag = false;
           
          },
          firstPage:function(){
            if(this.pageNum<=1){
              return;
            }

            $(".prev").addClass("disabled");
            $(".next").removeClass("disabled");
            this.number = 0;
            this.showPageindex(0,this.maxNum,this.number)
            var pageArr = {
              page_num : this.number+1
            }
            optVue.xqglNowPag(this,pageArr);
            this.firstFlag = false;
            this.prevFlag = false;
            this.lastFlag = true;
            this.nextFlag = true;
          },
        }    
    }
</script>



